<template>
  <div class="app-container">
    <div>
      <el-form ref="form" label-width="80px" :inline="true" size="small">
        <el-form-item label="提交时间">
          <el-date-picker
            v-model="queryform.planStartTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"

            placeholder="请选择时间"
          />
        </el-form-item>
        <el-form-item label="状态">
          <!-- <el-input v-model="queryform.status" placeholder="请输入" clearable></el-input> -->
          <el-select
            v-model="queryform.status"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="dict in [
                { label: '未提交', value: 0 },
                { label: '审核中', value: 1 },
                { label: '审核通过', value: 2 },
                { label: '审核驳回', value: -1 },
              ]"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核时间">
          <el-date-picker
            v-model="queryform.planStartTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"

            placeholder="请选择时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small">重置</el-button>
          <!-- @click="handleQuery" @click="resetQuery"-->
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">
          新增申请
        </el-button>
      </el-col>
      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%"
    >

      <el-table-column
        align="center"
        prop="date"
        label="提交时间"
      />
      <el-table-column label="变更前" align="center">
        <el-table-column
          prop="name"
          label="部门"
          align="center"
        />
        <el-table-column
          prop="name"
          label="科室"
          align="center"
        />
        <el-table-column
          prop="name"
          label="专业技术职务"
          align="center"
          min-width="120"
        />

      </el-table-column>
      <el-table-column label="变更后" align="center">
        <el-table-column
          prop="name"
          label="部门"
          align="center"
        />
        <el-table-column
          prop="name"
          label="科室"
          align="center"
        />
        <el-table-column
          prop="name"
          label="专业技术职务"
          align="center"
          min-width="120"
        />

      </el-table-column>
      <el-table-column prop="name" label="状态" min-width="150" align="center" />
      <el-table-column prop="date" label="变更时间" min-width="150" align="center" />
      <el-table-column label="操作" align="center" width="160">
        <template>
          <el-button size="mini" type="text">提交</el-button>
          <el-button size="mini" type="text">查看详情</el-button>
          <!--slot-scope="scope" @click="handleDelete(scope.row)" -->
        </template>
      </el-table-column>

    </el-table>
    <!-- 新增/编辑 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <div>
        <el-row class="headerbox" style="margin-bottom: 20px;">
          <el-col :span="24">
            <div style="float: left;display: block;"><span class="span1" /><span style="margin-left:20px">个人信息</span></div>
            <el-divider class="divider" />
          </el-col>
        </el-row>
        <el-descriptions :column="2" style="padding-left: 20px;">
          <el-descriptions-item label="员工编号">{{ DetaliList.employeeCode }}</el-descriptions-item>
          <el-descriptions-item label="员工姓名">{{ DetaliList.employeeName }}</el-descriptions-item>
          <el-descriptions-item label="所属部门">{{ DetaliList.departmentName }}</el-descriptions-item>
          <el-descriptions-item label="所属科室">{{ DetaliList.postName }}</el-descriptions-item>
          <el-descriptions-item label="专业技术职务">{{ DetaliList.dutiesValue }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <el-row class="headerbox" style="margin: 20px 0;">
        <el-col :span="24">
          <div style="float: left;display: block;"><span class="span1" /><span style="margin-left:20px">申请信息</span></div>
          <el-divider class="divider" />
        </el-col>
      </el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="124px" size="medium">
        <el-row>
          <el-col :span="12">
            <el-form-item label="转入部门" prop="planStartTime">
              <el-select
                v-model="form.departmentId"
                placeholder="请选择所属部门"
                style="width: 100%"
                clearable
                @change="bumenChange"
              >
                <el-option
                  v-for="(dict, index) in bumenList"
                  :key="index"
                  :label="dict.institutionName"
                  :value="parseInt(dict.id)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="转入科室" prop="planStartTime">
              <el-select
                v-model="form.postId"
                placeholder="请选择所属科室"
                style="width: 100%"
                clearable
                :disabled="!keshiList || keshiList.length == 0"
              >
                <el-option
                  v-for="(dict, index) in keshiList"
                  :key="index"
                  :label="dict.institutionName"
                  :value="parseInt(dict.id)"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="12">
            <el-form-item label="变更专业技术职务" prop="planStartTime">
              <el-select v-model="form.postId" placeholder="请选择专业技术职务" style="width: 100%" clearable>
                <el-option
                  v-for="(dict, index) in keshiList"
                  :key="index"
                  :label="dict.institutionName"
                  :value="parseInt(dict.id)"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划到岗时间" prop="planEndTime">
              <el-date-picker
                v-model="form.planEndTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择时间"
              >
                <!-- @change="DateChangeS" -->
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div>
        <el-row class="headerbox" style="margin-bottom: 20px;">
          <el-col :span="24">
            <div style="float: left;display: block;"><span class="span1" /><span style="margin-left:20px">审批流程</span></div>
            <el-divider class="divider" />
          </el-col>
        </el-row>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, ind) in activities"
            :key="ind"
            :timestamp="activity.content"
            placement="top"
            style="position: relative;"
          >
            <span v-if="activity.content=='审批人'" style="position: absolute; color: #FF0000;top: 5px;left: 20px;font-size: 16px;">*</span>
            <el-card>
              <!-- v-if="index<3" -->
              <el-tag
                v-for="(item, index) in activity.list"

                :key="item.name"
                :class="index>=2&&activity.list.length>3?'mrgR':''"
                effect="plain"
                closable
                @close="handleClose(item,ind,activity.type)"
              >
                <p style="overflow: hidden;">
                  <!--  v-if="item.employeeSexValue=='男'" -->
                  <img src="@/assets/imges/nan.png" alt="">
                  <!-- <img src="@/assets/images/nv.png" alt="" v-else> -->
                </p>
                <p style="text-align: center;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" title="搜索">都舍得</p>
                <p class="jtou"> > </p>
                <!-- <p v-if="index>=2&&activity.list.length>3" class="jtou1">...</p> -->
              </el-tag>
              <!--  @click="addPople(activity.type)" :class="type=='see'?'noEdit':''" -->
              <span class="btnBox"> <img src="@/assets/imges/u36.svg" alt=""></span>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm(0)">保存</el-button>
        <el-button type="primary" @click="submitForm(1)">提交</el-button>
        <el-button @click="open=false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 查看详情 -->

  </div>

</template>

<script>
//   import { listMechanism } from "@/api/hr/department";
export default {
  data() {
    return {
      title: '新增申请',
      showSearch: true,
      form: {},
      queryform: {},
      open: false,
      bumenList: [],
      keshiList: [],
      DetaliList: {
        employeeCode: '001',
        employeeName: '王小虎',
        departmentName: '行政',
        postName: '纪检监察室',
        dutiesValue: '办公室副主任兼精神康复治疗三科护士长'
      },
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      dialogTitle: { // 弹框标题
        Approval: '选择审批人',
        SendP: '选择抄送人'
      },
      // 假数据
      activities: [{
        content: '审批人',
        type: 'Approval',
        list: []
      }, {
        content: '抄送人',
        type: 'SendP',
        list: []
      }],
      rules: {}
    }
  },
  methods: {
    getList() {},
    handleAdd() {
      this.form = {}
      this.open = true
    },
    submitForm(e) {},
    // 获取部门科室
    getDepartList() {
      // listMechanism({ state: 1 })
      //   .then((res) => {
      //     this.deparmentList = res.data
      //     this.deparmentListCopy = 123
      //     // console.log(this.deparmentListCopy, "呼呼呼");
      //   })
      //   .then(() => {
      //     let bumenList
      //     //   = this.deparmentList.filter((item) => {
      //     //   return item.id == this.form.institutionId;
      //     // });
      //     for (const i in this.deparmentList) {
      //       if (this.deparmentList[i].id == this.form.institutionId) {
      //         bumenList = this.deparmentList[i].dson
      //       }
      //     }
      //     this.bumenList = bumenList
      //     let keshiList
      //     for (const a in this.bumenList) {
      //       if (this.bumenList[a].id == this.form.departmentId) {
      //         keshiList = this.bumenList[a].dson
      //       }
      //     }

      //     this.keshiList = keshiList

      //     // console.log(this.keshiList, "科室");
      //   })
    },
    bumenChange(e) {
      this.keshiList = []
      this.form.postId = undefined
      const curr = this.bumenList?.filter((item) => {
        return item.id == e
      })

      this.keshiList = curr[0]?.dson
    }
  }
}
</script>
  <style scoped lang="scss">
    .app-container {
        padding: 20px;
    }
    .headerbox{
        border-width: 0px;
        width: 100%;
        span{
            float: left;
            font-weight: 500;
            font-style: normal;
            font-size: 18px;
        }
        .span1{
            border-width: 0px;
            position: absolute;
            left: 0px;
            top: 0px;
            width: 6px;
            height: 20px;
            background: inherit;
            background-color: rgba(37, 97, 239, 1);
            border: none;
            border-radius: 8px;
        }
    }
    .divider{
        float: right;
        width: 85%;
        margin: 10px 0;
    }
    ::v-deep .el-card__body{
        padding: 20px 20px 30px;
        display: flex;
        align-items: center;
        .btnBox{
            display: flex;
            height: 60px;
            width: 60px;
            border-radius: 50%;
            border-color: #1890ff;
            border-width: 1px;
            border-style: dashed;
            align-items: center;
            justify-content: center;
            img{
                width: 40%;
                height: 40%;
            }
        }
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width: 100%;
    }
  </style>
